import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { AtButton, AtInput, AtTextarea } from 'taro-ui'
import { AtImagePicker } from 'taro-ui'
import { AtMessage } from 'taro-ui'
import NavBar from "../../../components/topbar/topbar"
import moment from 'moment';
import '../../test/test.scss'

const Comments = () => {
  const [userList, setUerList] = useState([])
  const [title, setTitle] = useState(undefined)
  const [contment, setContment] = useState(undefined)
  const [Url, setUrl] = useState([])


  const toBack = () => {
    Taro.navigateBack().then();
  }
  const toHome = () => {
    Taro.redirectTo({ url: "/pages/postBar/postBar" }).then();
  }


  // 小弹窗
  const handlePopup = (value: string) => {
    Taro.atMessage({
      'message': '发表成功',
      'type': value === 'error' ? 'error' : 'success',
      duration: 1500
    })
  }
  // 跳转
  const changePage = ulist => {
    const data = JSON.stringify(ulist)
    Taro.navigateTo({
      url: '/pages/postBar/content/content?userList=' + encodeURIComponent(data),
    })
  }
  // 跳转2
  const Choice = () => {
    // var pages=getCurrentPages();//获取当前页面的栈
    // var prevPage=pages[pages.length-6]
  }
  // 点击事件
  const addComment = () => {
    if (title === undefined && contment === undefined && Url === []) {
      handlePopup('error');
      // 为输入信息则不会执行一下操作
      return
    } else if (title !== undefined && contment !== undefined && Url ===[]) {
      // 更新数据列表
      const Contments = [{
        userTitle: title,
        userContent: contment,
        url: [],
        author: Taro.getStorageSync("userInfo").nickName,
        author_url: Taro.getStorageSync("userInfo").avatarUrl,
        content_time: moment().format('YYYY-MM-DD:HH:MM:SS'),
        date: moment().format('YYYY-MM-DD')
      }]
      setUerList(Contments)
      console.log('userList:' + userList.length)
      // 弹窗
      handlePopup('success')
      setTitle(undefined)
      setContment(undefined)
      // 载入宏观，1秒后跳转
      // setTimeout(changePage, 1000)
      //调用与函数
      add(newContment)
      return
    }
    // 更新数据列表
    let newContment = [{
      // id: userList.length + 1,
      userTitle: title,
      userContent: contment,
      url: Url,
      author: Taro.getStorageSync("userInfo").nickName,
      author_url: Taro.getStorageSync("userInfo").avatarUrl,
      content_time: moment().format('YYYY-MM-DD:HH:MM:SS'),
      date: moment().format('YYYY-MM-DD')
    }]
    // 弹窗
    handlePopup('success')

    console.log('url是', Url)
    // 替换
    setUerList(newContment)
    setTitle(undefined)
    setContment(undefined)
    setUrl(undefined)
    // 载入宏观，1秒后跳转
    // changePage()
    // setTimeout(()=>changePage(newContment), 1000)
    //调用与函数
    add(newContment)
  }
  console.log("newlist:", userList)
  //云函数
  const add = data => {
    console.log("你以及调用了论坛中的云函数")
    Taro.cloud.callFunction({
      name: "comments",
      data: {
        $url: "addForum",
        data
      }
    }).then(res => {
      console.log("数据插入成功")
      console.log(res.result)
    })
  }
  return (
    <View>
      <NavBar
        // onClickLeftIcon={handleClick1}
        color="#000"
        title="贴吧"
        back={true}
        nback={toBack}
        home={true}
        onHome={toHome}
      />
      <View className="atInput">
        {/* 标题 */}
        <AtInput
          placeholder="请输入标题"
          value={title}
          onChange={value => setTitle(value)}
          name={"title"}
        ></AtInput>
      </View>
      <View className="atTextarea">
        {/* 文本内容 */}
        <AtTextarea
          height={350}
          value={contment}
          onChange={value => {
            setContment(value);
          }}
          maxLength={1000}
          showConfirmBar={false}
          placeholder="请尽情发挥吧..."
        />
      </View>
      <View className="atImg">
        {/* 图片 */}
        <AtImagePicker
          mode="aspectFit"
          multiple
          length={3}
          files={Url}
          onChange={value => setUrl(value)}
        />
      </View>
      {/* //调用动态模板 */}
      {/* <ActionSheet/> */}
      <View>
        <AtMessage />
        <AtButton type="primary" size="small" onClick={() => addComment()}>
          发布
        </AtButton>
      </View>
      {console.log(userList)}

    </View>
  );
}

{/* <View> */ }
// {userList.map(item => (
//   <View key={item.id}>
//     评论人:{item.userTitle}
//     评论内容:{item.userContent}
//     图片:{item.url}
//     {/* <p>{item.name}:{item.contment}</p> */}
//   </View>
// ))}
{/* </View> */ }
export default Comments
